<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<!--关键词和描述-->
	<title>未分类项</title>
	<!--下面是 公共的css-->
	<link href="__ROOT__/static/css/bootstrap.min.css" rel="stylesheet" />
	<link href="__ROOT__/static/note/index/css/common.css" rel="stylesheet" />
	<!--下面 每个页面的特色css-->




</head>

<body>

	<h6>thunbnail</h6>
	<div class="row">
		<!--第一行-->
		<!--左一 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">
			<pre>
		width:330px;
		height:200px;
		margin: auto;  
		position: absolute;  
		top: 0; 
		left: 0; 
		bottom: 0; 
		right: 0; 
		background: red; 
			</pre>
		</div>
		<!--左二 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:300px">
			<div style=" width:330px;height:200px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;  "></div>
		</div>
		<!--左三 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">

		</div>
		<!--左四 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:500px">
			<div style="width:200px;height:300px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;  "></div>
		</div>

		<!--第六行-->
		<!--左一 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">
			<pre>
	缩略图 <br/>
	图片小于背景 则按原大小
	
	 class="thumbnail"
	class="img-responsive center-block
				</pre>
		</div>
		<!--左二 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:300px">
			<div class="thumbnail">
				<img src="__ROOT__/static/note/img/5.jpg" class="img-responsive center-block" />
			</div>
		</div>
		<!--左三 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">
			图片自适应背景div width的大小 原图片宽度>div宽度
			<font color="red">图片长度超出背景div</font>
		</div>
		<!--左四 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:500px">
			<div class="thumbnail">
				<img src="__ROOT__/static/note/img/7.jpg" style="width:100px;height:150px" />
			</div>
		</div>




		<!--第三行-->
		<!--左一 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">
			<pre>
图片大于背景<br/>
图片大于背景 则横向与背景一致 长度超出
			</pre>
		</div>
		<!--左二 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:300px">
			<div style="width:150px;height:100px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;  ">
				<div class="thumbnail">
					<img src="__ROOT__/static/note/img/5.jpg" />
				</div>
			</div>
		</div>
		<!--左三 代码-->
		<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 a">

		</div>
		<!--左四 图片-->
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 a" style="height:500px">
			<div style="width:100px;height:150px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background: red;  ">


				<img src="__ROOT__/static/note/img/7.jpg" class="img-responsive center-block" style="margin-top: 50px;width:1000px" />
			</div>
		</div>




	</div>







	<!--下面是 公共的js-->
	<script src="__ROOT__/static/js/jquery.min.js"></script>
	<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>

</html>